<template>
	<el-row>
		<el-col class="top">
			<label>抢救信息统计</label>
		</el-col>
		<el-col>
			<el-row class="dateBar">
				<el-col>
					<el-date-picker
					v-model="timeRange"
					type="datetimerange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
					</el-date-picker>
					<el-button type="primary" @click="getStatistic">确定</el-button>
				</el-col>
			</el-row>
		</el-col>
		<el-col class="infoTitle">
			<el-row>
				<el-col :span="18">
					<i class="el-icon-menu"></i>抢救信息统计<span class="timeRange">{{timeString}}</span>
				</el-col>
				<el-col :span="6" class="actionBtn">
					<el-button-group>
						<el-button type="primary" size="small" disabled>结果导出</el-button>
						<el-button type="primary" size="small" disabled>结果打印</el-button>
					</el-button-group>
				</el-col>
			</el-row>
		</el-col>
		<el-col>
			<table class="infoTable">
				<thead>
					<tr>
						<th>类别</th>
						<th>Ⅰ级抢救率</th>
						<th>Ⅰ级抢救成功率</th>
						<th>Ⅱ级抢救率</th>
						<th>Ⅱ级抢救成功率</th>
						<th>Ⅲ级抢救率</th>
						<th>Ⅳ级抢救率</th>
						<th>心脏骤停抢救率</th>
						<th>心脏骤停成功率</th>
						<th>抢救成功率</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							百分比<br>
							(人数)
						</td>
						<td>
							{{commonUtil.toPercent(allData.level1,allData.allCount)}}<br>(
							{{allData.level1?allData.level1:'-'}})
						</td>
						<td>
							{{commonUtil.toPercent(allData.level1s,allData.level1)}}<br>(
							{{allData.level1s?allData.level1s:'-'}})
						</td>
						<td>
							{{commonUtil.toPercent(allData.level2,allData.allCount)}}<br>(
							{{allData.level2?allData.level2:'-'}})
						</td>
						<td>
							{{commonUtil.toPercent(allData.level2s,allData.level2)}}<br>(
							{{allData.level2s?allData.level2s:'-'}})
						</td>
						<td>
							{{commonUtil.toPercent(allData.level3,allData.allCount)}}<br>(
							{{allData.level3?allData.level3:'-'}})
						</td>
						<td>
							{{commonUtil.toPercent(allData.level4,allData.allCount)}}<br>(
							{{allData.level4?allData.level4:'-'}})
						</td>
						<td>
							{{commonUtil.toPercent(allData.heartCount,allData.allCount)}}<br>(
							{{allData.heartCount?allData.heartCount:'-'}})
						</td>
						<td>
							{{commonUtil.toPercent(allData.heartsCount,allData.heartCount)}}<br>(
							{{allData.heartsCount?allData.heartsCount:'-'}})
						</td>
						<td>
							{{commonUtil.toPercent(allData.sucessCount,allData.allCount)}}<br>(
							{{allData.sucessCount?allData.sucessCount:'-'}})
						</td>
					</tr>
				</tbody>
			</table>
		</el-col>
	</el-row>
</template>
<script type="text/javascript">
	export default{
		name:'Rescue',
		data(){
			return {
				timeRange:[new Date((new Date()).getTime()-3600*1000*24*1),new Date()],
				timeString:"",
				curUser:{},
				allData:{}
			}
		},
		mounted(){
			if (this.$cookies.get("curUser")) {
				this.curUser = this.$cookies.get("curUser");
			}
		},
		methods:{
			getStatistic:function(){
				var vm = this;
				var startTime = new Date();
				var lastTime = new Date((new Date()).getTime()-3600*1000*24*1);
				if (vm.timeRange.length==2) {
					startTime = vm.timeRange[0];
					lastTime = vm.timeRange[1];
				}
				vm.setTimeString();
				var hospitalCode = vm.curUser.hospitalCode;
				this.$axios.getRescueData(vm.commonUtil.dateFormat(startTime,"yyyy-MM-dd hh:mm:ss"),vm.commonUtil.dateFormat(lastTime,"yyyy-MM-dd hh:mm:ss"),hospitalCode).then(function(res){
					if (res.data&&res.data.data) {
						vm.allData = res.data.data;
					}
				},function(res){
					console.log("error:"+res);
				});
			},
			setTimeString:function(){
				let vm = this;
				if (vm.timeRange.length==2) {
					let startTime = vm.timeRange[0];
					let lastTime = vm.timeRange[1];
					vm.timeString = "("+vm.commonUtil.dateFormat(startTime,"yyyy-MM-dd hh:mm:ss")+" 至 "+vm.commonUtil.dateFormat(lastTime,"yyyy-MM-dd hh:mm:ss")+")";
				}else{
					vm.timeString ="";
				}
			}
		},
	}
</script>
<style type="text/css" scoped>
	.top{
		font-weight: bolder;
		line-height: 45px;
		height: 45px;
		border-bottom: 1px dashed #eeeeee;
	}
	.dateBar{
		text-align: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.infoTable{
		 width:100%;
		 table-layout:fixed;
		 border-right: solid 1px #000000;
		 border-bottom: solid 1px #000000;
		 border-collapse: collapse;
		 text-align: center;
		 line-height: 45px;
		 font-size: 14px;
	}
	.infoTable th{
		border-left: solid 1px #000000;
		border-top: solid 1px #000000;
		background-color: lightblue;
	}
	.infoTable td{
		border-left: solid 1px #000000;
		border-top: solid 1px #000000;
	}
	.infoTitle{
		font-weight: bolder;
		color: #000000;
		margin-top: 30px;
		text-align: left;
		line-height: 45px;
	}
	.actionBtn{
		text-align: right;
		padding-right: 10px;
	}
	.timeRange{
		font-weight: lighter;
	}
</style>